<template>
  <div class="chapter">
    <van-sticky>
      <div class="sticky">
      <div class="header">
        <van-nav-bar title="目录">
          <template #left>
            <van-icon name="arrow-left" color="DarkGray" @click="onClickLeft" />
          </template>
        </van-nav-bar>
      </div>
      <div class="book-desc">
        <div class="left-img">
          <img
            class="img-size"
            :src="listdata.book.coverImage"
            alt=""
          />
        </div>
        <div class="right-txt">
          <div class="book-title">{{listdata.book.title}}</div>
          <div class="book-author">{{listdata.book.author}}</div>
        </div>
      </div>
      </div>
    </van-sticky>
    <van-sticky :offset-top="138">
      <div class="nav-btn">
        <van-notice-bar
          color="#000"
          left-icon="info-o"
          background="#fff"
          mode="link"
        >
          <template #right-icon>
            <div class="default-box">
              <div class="default-left" @click="reset">
                <div class="default-btn">倒序</div>
                <div class="default-img">
                  <img src="../assets/top.png" alt="" v-if="flag">
                  <img src="../assets/tobottom.png" alt="" v-else>
                </div>
              </div>
            </div>
          </template>
          <template #left-icon>
            <div>共{{listdata.catalog.length}}章</div>
          </template>
        </van-notice-bar>
      </div>
    </van-sticky>

    <div class="content-item" v-for="(v1, i1) in listdata.catalog" :key="i1">
      <div class="item" >
        <div class="time-title">{{ v1.title }}</div>
        <div class="isvip" v-if="v1.needPay">
          <img src="../assets/nolook.png" alt="" />
        </div>
      </div>
      <van-divider
        dashed
        :style="{ color: '#1989fa', borderColor: 'dimgray', padding: '0 16px' }"
      >
      </van-divider>
    </div>
  </div>
</template>

<script>
export default {
  name: "chapter",
  data() {
    return {
      listdata: {
        book:{},
        catalog:[]
      },
      flag:true
    };
  },
  created() {
    let id = this.$route.params.id;
    // console.log(id);
    this.getListData(id);
  },
  methods: {
    gotoBookLook(id) {
      // console.log(title);
      this.$router.push({name:"BookContent",params:{id:id}})
    },
    reset() {
      this.listdata.catalog.reverse();
      this.flag = !this.flag
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    getListData(id) {
      this.axios({
        method: "get",
        url: `reader/book/info.json?source_uuid=${id}`,
      })
        .then((result) => {
          // console.log(result);
          // console.log(result.data.data.catalog[0]);
          this.listdata = result.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
// .nav-btn {
//   margin-top: 5px;
// }
.sticky{
  background-color: #fff;
}
.default-left {
  width: 60px;
  height: 20px;
  border: 1px solid #ccc;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
  font-size: 13px;
  color: gray;
  display: flex;
  align-content: center;
  .default-btn{
    margin-left: 10px;
  }
  
}
.default-img{
  img{
    padding-top: 3px;
    width: 14px;
  }
}
.img-size {
  width: 70px;
  height: 90px;
}
.book-desc {
  display: flex;
  background-color: #fff;
  padding: 0px 20px;
}
.right-txt {
  // line-height: 92px;
  margin-left: 15px;
  margin-top: 24px;
}
.book-title {
  font-size: 13px;
}
.book-author {
  color: gray;
}
.item {
  padding: 10px 15px;
  // padding-top: 10px;
  display: flex;
  justify-content: space-between;
  color: gray;
}

.content-item {
  background-color: #fff;
}
.van-divider {
  margin: 0;
}
</style>